<template>
  <div class="reactivity-container">
    <h1>Vue 3 响应式基础学习</h1>
    
    <!-- 1. ref() 基础演示 -->
    <section class="demo-section">
      <h2>✨ 1. 响应式引用 (ref)</h2>
      <p class="concept">ref 允许我们创建一个响应式的引用，适用于基本数据类型</p>
      
      <div class="demo-box">
        <p>当前计数: {{ counter }}</p>
        <button @click="increment" class="btn">增加计数</button>
        <button @click="resetCounter" class="btn btn-secondary">重置</button>
      </div>
    </section>

    <!-- 2. reactive() 基础演示 -->
    <section class="demo-section">
      <h2>🏠 2. 响应式对象 (reactive)</h2>
      <p class="concept">reactive 用于创建一个响应式的对象，适用于复杂数据结构</p>
      
      <div class="demo-box">
        <p>用户信息:</p>
        <div class="user-info">
          <p>姓名: {{ user.name }}</p>
          <p>年龄: {{ user.age }}岁</p>
          <p>技能: {{ user.skills.join(', ') }}</p>
        </div>
        <button @click="updateUser" class="btn">更新用户</button>
      </div>
    </section>

    <!-- 3. computed() 基础演示 -->
    <section class="demo-section">
      <h2>🧮 3. 计算属性 (computed)</h2>
      <p class="concept">computed 创建一个响应式的计算值，会缓存结果直到依赖改变</p>
      
      <div class="demo-box">
        <p>输入一个数字: <input v-model.number="inputNumber" type="number" /></p>
        <p>计算结果: {{ squareResult }}</p>
        <p class="hint">尝试改变数字，计算属性会自动更新!</p>
      </div>
    </section>

    <!-- 4. watch() 基础演示 -->
    <section class="demo-section">
      <h2>👀 4. 监听器 (watch)</h2>
      <p class="concept">watch 用于监听响应式数据的变化并执行副作用</p>
      
      <div class="demo-box">
        <p>输入消息: <input v-model="message" /></p>
        <p class="watch-log" v-if="messageLog">
          <span class="log-icon">📝</span>
          {{ messageLog }}
        </p>
      </div>
    </section>

    <!-- 5. toRefs() 基础演示 -->
    <section class="demo-section">
      <h2>🔗 5. 解构响应式对象 (toRefs)</h2>
      <p class="concept">toRefs 将响应式对象转换为普通对象，保持响应式</p>
      
      <div class="demo-box">
        <p>解构后的用户名: {{ userName }}</p>
        <p>解构后的年龄: {{ userAge }}</p>
        <button @click="changeDeconstructedProps" class="btn">修改解构属性</button>
      </div>
    </section>

    <!-- 总结卡片 -->
    <div class="summary-card">
      <h3>🎉 Vue 3 响应式总结</h3>
      <ul>
        <li><strong>ref()</strong>: 用于基本数据类型，使用.value访问</li>
        <li><strong>reactive()</strong>: 用于对象/数组，深度响应式</li>
        <li><strong>computed()</strong>: 计算属性，会缓存结果</li>
        <li><strong>watch()</strong>: 监听变化，执行副作用</li>
        <li><strong>toRefs()</strong>: 解构响应式对象，保持响应式</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, toRefs } from 'vue';

// 1. ref 演示
const counter = ref<number>(0);
function increment() {
  counter.value++;
}
function resetCounter() {
  counter.value = 0;
}

// 2. reactive 演示
const user = reactive<{
  name: string;
  age: number;
  skills: string[];
}>({
  name: '张三',
  age: 25,
  skills: ['Vue', 'TypeScript']
});

function updateUser() {
  user.name = '李四';
  user.age = 26;
  user.skills.push('React');
}

// 3. computed 演示
const inputNumber = ref<number>(0);
const squareResult = computed(() => {
  return inputNumber.value * inputNumber.value;
});

// 4. watch 演示 - 完全避免模板字符串
const message = ref<string>('');
const messageLog = ref<string>('');

watch(message, (newMessage, oldMessage) => {
  // 使用简单的字符串连接，避免任何引号嵌套问题
  messageLog.value = '消息已更新';
});

// 5. toRefs 演示
const { name: userName, age: userAge } = toRefs(user);

function changeDeconstructedProps() {
  userName.value = '王五';
  userAge.value = 28;
}
</script>

<style scoped>
.reactivity-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

h1 {
  color: #42b883;
  text-align: center;
  margin-bottom: 30px;
  font-size: 2.5em;
}

h2 {
  color: #35495e;
  margin-top: 40px;
  margin-bottom: 15px;
  font-size: 1.8em;
}

.demo-section {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.concept {
  color: #666;
  font-size: 1.1em;
  margin-bottom: 20px;
  border-left: 4px solid #42b883;
  padding-left: 15px;
}

.demo-box {
  background-color: #fff;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e1e1e1;
}

.btn {
  background-color: #42b883;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #3aa876;
}

.btn-secondary {
  background-color: #6c757d;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

input[type="number"],
input[type="text"] {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: 10px;
  width: 100px;
}

.user-info {
  background-color: #f0f7fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.watch-log {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  padding: 10px;
  margin-top: 15px;
  color: #856404;
}

.log-icon {
  margin-right: 8px;
  font-size: 18px;
}

.hint {
  font-style: italic;
  color: #666;
  font-size: 0.9em;
  margin-top: 10px;
}

.summary-card {
  background-color: #42b883;
  color: white;
  border-radius: 8px;
  padding: 25px;
  margin-top: 40px;
}

.summary-card h3 {
  margin-top: 0;
  font-size: 1.5em;
}

.summary-card ul {
  list-style-type: none;
  padding-left: 0;
}

.summary-card li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.summary-card li:last-child {
  border-bottom: none;
}

@media (max-width: 600px) {
  .reactivity-container {
    padding: 10px;
  }
  
  h1 {
    font-size: 2em;
  }
  
  h2 {
    font-size: 1.5em;
  }
  
  .demo-section {
    padding: 15px;
  }
}
</style>